<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" type="text/css" href="__HOME__/css/message.css"/>
	<script src="__HOME__/js/jquery.min.js"></script>
	<title>资讯页</title>
</head>
<body>
	<div class="wrap">
		<div class="header">
			<div class="header-l">
				<a href="javascript:history.back(-1)">
					<img src="__HOME__/images/top_arrowleft.png" alt="" />
				</a>
			</div>
			<p>热门资讯</p>
		</div>
		
		<div class="conter">
			<div class="tab">
				<ul class="tob">
					<li class="active"><a href="javascript:;">热门</a></li>
					<li><a href="javascript:;">最新</a></li>
				</ul>
			</div>
			<div id="tes"></div><!--遮罩层-->
			<ul class="nr clearfix">
				
				{volist name="data" id="value" offset="0" length='10'}<!--循环li-->
					<!--循环  id是valu  起始位置是0  每次循环15条数据-->
				<li class="minute" id="{$value.id}"><a class="clearfix" href="#"><!--用来区分是哪个id,-->
					<p>{$value.shopname}</p>
					<span>{$value.intro}</span>
					<strong><p>发布时间：{$value.Otime}</p><i>联系</i></strong>
				</a></li>
		
				<div class="details" id="details{$value.id}"><!--弹出层页面--><!--对应上面的那个value.id-->
					<div id="del" class="del"><img src="__HOME__/images/del_02.png"/></div><!--关闭按钮-->
					<span class="Newinfo">{$value.intro}</span><!--信息内容-->
				</div>
				
				{/volist}
			</ul>

		</div>
		
	</div>
	
	
	<script>
		$(function(){
			
				$(".minute").click(function(){
				$('#tes').show();//遮罩显示
				var id = $(this).attr('id');//
				$('#details'+id).show();//点击按钮的时候，框显示,加id是为了区分是哪个id字段。
				
			})

				/*鼠标点击非按钮时，框消失*/
				$(document).bind('click',function(e){ //在页面其他地方绑定一个点击事件
     				var e = e || window.event; //浏览器兼容性 
					var elem = e.target || e.srcElement; 
					while (elem) { //循环判断至跟节点，防止点击的是div子元素 
					if (elem.id && elem.id=='test') { 
						return; 
					} 
						elem = elem.parentNode; 
					} 
					$('#test').css('display','none'); //点击的不是div或其子元素 
					
						}); 
						
												
				$('.del').click(function(){
					$('.details').hide();//点击按钮的时候，框显示
					$('#tes').hide();//遮罩消失
				})
				
		
			})//整个事件结束
	</script>
	
	
</body>
</html>